import { useState } from "react"
import { navConfig } from "@/lib/navConfig"
import { HambergerMenu } from "iconsax-react"
import { useRouter } from "next/navigation"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Button } from "../ui/button"

export default function MobileNav() {
  const [opened, setOpened] = useState<boolean>(false)

  const router = useRouter()

  return (
    <Sheet open={opened} onOpenChange={(open) => setOpened(open)}>
      <SheetTrigger asChild className="block md:hidden">
        <Button
          className="dark:text-white px-2 py-2 flex justify-center items-center border-2 border-black dark:border-white text-black bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-900"
          variant="outline"
          size="sm"
          aria-label="Toggle Navbar"
          data-cursor-text="expand"
        >
          <HambergerMenu size={20} />
          <span className="sr-only">Toggle Navbar</span>
        </Button>
      </SheetTrigger>
      <SheetContent className="w-full h-full border-0 bg-white dark:bg-black">
        <div className="py-16 sm:py-20 w-full flex flex-col absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 gap-8 sm:gap-10 items-center">
          {navConfig.map((navLink) => (
            <div
              className="text-black dark:text-white hover:text-tech-blue dark:hover:text-tech-blue text-xl sm:text-2xl font-bold cursor-none transition-colors"
              key={navLink.id}
              data-cursor-text="goto"
              onClick={(e) => {
                e.preventDefault()
                router.push(navLink.href)
                setOpened(false)
              }}
            >
              {navLink.title}
            </div>
          ))}
          
          {/* 移动端CTA按钮 */}
          <button 
            className="neo-brutal-btn mt-6 sm:mt-8 w-full max-w-xs"
            data-cursor-text="initiate"
            onClick={() => {
              router.push('#contact')
              setOpened(false)
            }}
          >
            预约演示
          </button>
        </div>
      </SheetContent>
    </Sheet>
  )
}
